<template>
    字符串反转：{{message}}<br>
    计数器：{{count}}，该数据是确应式数据否：{{abc}}<br>
    <button @click='click'>测试</button> 
</template>

<script>
import { computed, reactive, toRefs, ref, isRef } from 'vue'

export default {
    setup () {
        const state = reactive({
           message: 'Hello Vue3 World!'
        })
        const count = ref(0);
        const click = () => {
                state.message = state.message.split('').reverse().join('')
                count.value++
                // 引用 不能是primitive 的变量，不然是不能改变的 
                // 所以他得是一个引用的对象
        }
        const abc = computed(()=>isRef(count))
        // 是ref 就是响应式 他是引用
        return {
            ...toRefs(state),
            click,
            count,
            abc
        }
    }
}
</script>

